{{template "header" .}}
<style>
    body{background: linear-gradient(to bottom, #3271ae,#aed0ee, #fff);height:100vh;overflow: hidden;}
    .card{width:86vw;height:40vh;margin-left:7vw;box-shadow: 0 0 10 #ccc;border-radius: 10px;background-color: #fff;border:1px solid #ccc;margin-top:40px;box-shadow: 0 0 10px #8CB6DC;}
    .logo{text-align: center;color:#fff;height:180px;padding-top:20px;}
    .logo span{font-size: 150px;color:#aed0ee}
    .logo .name{font-size:24px;margin-bottom:1vh;color:#003460;text-shadow: 1px 1px 1px #fff;font-weight: bold;}
    .form-item{display:flex;border:1px solid #ccc;border-radius: 3px;padding:5px;margin:30px;height:30px;line-height: 30px;align-items: center;}
    .form-item .iconfont{font-size: 24px;color:#3271ae}
    .form-item input{height:30px;line-height: 30px;padding:0 7px !important;width:100%;border:none;outline: none;font-size: 18px;border:none !important}
    .form-item .input{width:calc(100% - 60px);margin-left:10px;margin-top: 0;}
    .form-item button{width:100%;border:none;height:40px;background-color: dodgerblue;color:#fff;font-size: 18px;border-radius: 4px;}
</style>
<div class="logo">
    <span class="iconfont icon-jiazuzupu-"></span>
    <div>
        <p class="name">{{.name}}</p>
        <p>成员登录</p>
    </div>
</div>
<div class="card">
<form action="/m/login" method="post" onsubmit="onSubmit(event)">
    <div class="form-item">
        <span class="iconfont icon-xingming"></span>
        <div class="input">
            <input type="text" name="name" placeholder="姓名">
        </div>
    </div>
    <div class="form-item">
        <span class="iconfont icon-mima"></span>
        <div class="input">
            <input type="password" name="password" placeholder="密码">
        </div>
    </div>
    <div class="form-item" style="border:none;padding:0">
        <button type="submit">登录</button>
    </div>
</form>
</div>
</div>
</body>
<script>
    function onSubmit(ev){
        ev.preventDefault();
        var form = ev.target;
        if(form.name.value==""){
            form.name.parentNode.parentNode.style.borderColor="#ea2027"
            return;
        }
        if(form.password.value==""){
            form.password.parentNode.parentNode.style.borderColor="#ea2027"
            return;
        }
        form.submit();
    }
    document.addEventListener('DOMContentLoaded',()=>{
        document.querySelectorAll('input').forEach(o=>{
            o.addEventListener('input',ev=>{
                if(ev.target.value!=""){
                    ev.target.parentNode.parentNode.style.borderColor = '#ccc'
                }else{
                    ev.target.parentNode.parentNode.style.borderColor = '#ea2027'
                }
            })
        })
    })
</script>
</html>